<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>注册</title>
		<link rel="stylesheet" type="text/css" href="__API__/lib/css/swiper.min.css">
		<link rel="stylesheet" type="text/css" href="__API__/lib/css/mui.css?v=1">
		<link rel="stylesheet" type="text/css" href="__API__/lib/css/mobileSelect.css" />
		<link rel="stylesheet" href="__API__/lib/css/style.css">
		<script type="text/javascript" src="__API__/lib/js/jquery-1.11.0.min.js"></script>
		<script type="text/javascript" src="__API__/lib/js/mui.js"></script>
		<script src="__API__/lib/js/mobileSelect.js" type="text/javascript" charset="utf-8"></script>
		<script src="__API__/lib/js/city.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="__API__/lib/js/swiper.min.js"></script>
		<script type="text/javascript" src="__API__/lib/js/vue.min.js"></script>
		<script type="text/javascript" src="__API__/lib/js/common.js"></script>
		<script type="text/javascript" src="__API__/lib/js/index.js"></script>
	<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script></head>

	<body>
		<div class="register" id="app">
			<div class="register_box">
				<div class="register_con">
					<ul class="form_list">
						<li>
							<div class="icon"><img src="__API__/lib/images/l_icon1.png" alt=""></div><input type="tel"  v-model="mobile" placeholder="请输入手机号" />
						</li>
						<li>
							<div class="icon"><img src="__API__/lib/images/l_icon2.png" alt=""></div>
							<input type="text" name="" id="" v-model="code" placeholder="请输入短信验证码" />
							<button class="yzmcode" @click="getCode()" :disabled="disadles">{{massage}}</button>
						</li>
						<li>
							<div class="icon"><img src="__API__/lib/images/l_icon3.png" alt=""></div>
							<input type="text" name="" id="" v-model="password" placeholder="请输入登录密码" />
						</li>
						<li>
							<div class="icon"><img src="__API__/lib/images/l_icon4.png" alt=""></div>
							<input type="number" oninput="if(value.length>8)value=value.slice(0,8)" name="" id="" v-model="invitationCode" placeholder="请输入邀请码" />
						</li>
					</ul>
					<p class="tip">密码规则:字母+数字，长度8~18位</p>
				</div>
				<div class="register_btn blue_btn" @click="onRegister">
					立即注册
				</div>
				<div class="agreement">
					<input type="checkbox" v-model="isAgreen" />我已阅读并同意<a class="blue" href="{:url('member_detail')}">《用户服务协议》</a>
				</div>
			</div>
		</div>
		<script>
			var app = null;
			app = new Vue({
				el: '#app',
				data: {
					logoImg: "{:cache('logo')}",
					mobile: '',
					password: '',
					code: '',
					invitationCode:localStorage.getItem('invite_code'),
					time: 60,
					disadles: false,
					massage: '获取验证码',
					isAgreen: false
				},
				created: function() {
					var that = this;
				},
				methods: {
					//获取验证码
					getCode() {
						let that = this;
						if(!that.mobile){
							return common.alert('请填写手机号',' ');
						}
						if(!common.validate.isPhone(that.mobile)){
							return common.alert('请输入正确的手机号',' ')
						}

						let setInter = setInterval(() => {
							that.time--;
							if (that.time <= 0) {
								that.massage = "获取验证码";
								that.disadles = false;
								clearInterval(setInter);
							} else {
								that.massage = "重新获取(" + that.time + ")";
								that.disadles = true;
							}
						}, 1000);
						common.ajax("{:url('Member/captcha')}",{type:'register',mobile:that.mobile} , function(res){
							common.showToast(res.msg,' ');

						})
					},
					//登录
					onRegister() {
						let that = this;
						console.log('登录',that.isAgreen)
						let data = {
							mobile: that.mobile,
							password: that.password,
							      captcha: that.code,
							invite_code: that.invitationCode
						}
						if(data.mobile == ''){
							return common.alert('请输入手机号',' ');
						}
						if(data.captcha == ''){
							return common.alert('请输入验证码',' ');
						}
						if(data.password == ''){
							return common.alert('请输入登录密码',' ');
						}

						if(data.mobile == '' || data.password == '' || data.code == ''){
							return common.alert('信息不能为空',' ');
						}
						if(!common.validate.isPhone(data.mobile)){
							return common.alert('请输入正确的手机号',' ')
						}
						if(!that.isAgreen){
							return common.alert('您尚未勾选会员服务协议！',' ');
						}

						common.ajax("{:url('Member/register')}",data , function(res){
							common.showToast(res.msg);
							if (res.code == 200) {
								localStorage.setItem('member_id',res.data.id)
								//localStorage.setItem('openid',res.data.openid);
								localStorage.setItem('token',res.data.token)
								setTimeout(function() {
									common.openUrl("{:url('index')}");
								}, 1000)
							}
						})
					},
					goDetail(url){
						common.openUrl(url);
					}
				}
			})
		</script>
	</body>

</html>
